<template>
    <div id="nor">
        <div style="text-align: center;height: auto">
            <div class="a1">
                <p>{{registerUserCount}}</p>
                <p>用户注册</p>
            </div>
            <div class="b1">
                <p>{{activeUserCount}}</p>
                <p :style="{ backgroundImage:backgroundImage,color:color}">{{hb1}}</p>
                <p>环比前一日</p>
                <p>昨日活跃用户</p>
            </div>
            <div class="c1">
                <p>{{blogCount}}</p>
                <p>发帖用户</p>
            </div>
            <div class="d1">
                <p>{{driverCallCount}}</p>
                <p>司机拨打电话次数</p>
            </div>
            <div class="e1">
                <p>{{toShopsCount}}</p>
                <p>被拨打商家人数</p>
            </div>
        </div>
        <div style="text-align: center;">
            <div style="display: inline-block;width: 100%;">
                <div style="width: 90%;text-align: center;font-size: 20px">每日注册用户分析</div>
                <br>
                <div style="text-align: right;width: 90%;">
                    <DatePicker v-model="startTime1" type="date" placeholder="选择开始时间" style="width: 150px"></DatePicker>
                    至
                    <DatePicker v-model="endTime1" type="date" placeholder="选择结束时间" style="width: 150px"></DatePicker>
                    &nbsp;
                    <Button type="info" @click="search1()">查询</Button>
                </div>
                <div style="width: 90%;margin-top: 20px;margin-left: 2%">
                    <ve-line :data="chartData1a1a1a1" style="width: 90%;"></ve-line>
                </div>
                <div style="width: 90%;text-align: center;font-size: 20px;">每日活跃用户分析</div>
                <br>
                <div style="text-align: right;width: 90%;">
                    <DatePicker v-model="startTime2" type="date" placeholder="选择开始时间" style="width: 150px"></DatePicker>
                    至
                    <DatePicker v-model="endTime2" type="date" placeholder="选择结束时间" style="width: 150px"></DatePicker>
                    &nbsp;
                    <Button type="info" @click="search2()">查询</Button>
                </div>
                <div style="width: 90%;margin-top: 20px;margin-left: 2%">
                    <ve-line :data="chartData2"  style="width: 90%;"></ve-line>
                </div>

                <div id="loading" v-if="loading">
                    <div class="spinner">
                        <div class="double-bounce1"></div>
                        <div class="double-bounce2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>
<script type="text/ecmascript-6">
    import sessionUtils from '../../model/sessionUtils';
    import ipServer from '../../model/ip';
    import Axios from 'axios';
    export default{
        data(){
            return {
                backgroundImage: "",
                backgroundImage1: "url(" + require("../../assets/images/a1.png") + ")",
                backgroundImage2: "url(" + require("../../assets/images/a2.png") + ")",
                startTime2: "",
                startTime1: "",
                loading: false,
                endTime1: "",
                endTime2: "",
                chartData1a1a1a1: {
                    columns: ["日期", '总用户数量', '司机', '商家'],
                    rows: []
                }, chartData2: {
                    columns: ["日期", '总用户数量', '司机', '商家'],
                    rows: []
                },
                registerUserCount: 0,
                activeUserCount: 0,
                blogCount: 0,
                driverCallCount: 0,
                toShopsCount: 0,
                hb: 0.0,
                hb1: "",
                color: ""
            }
        },
        mounted(){
            this.getDataHead();
        },
        methods: {
            search2(){
                var param = new URLSearchParams();
                param.append('mobile', sessionUtils.getSession("mobile"));
                param.append('token', sessionUtils.getSession("token"));
                if (this.startTime2) {
                    param.append('startYearMonthDay', sessionUtils.DateToTime(this.startTime2) + "");
                }
                if (this.endTime2) {
                    param.append('endYearMonthDay', sessionUtils.DateToTime(this.endTime2) + "");
                }
                this.loading = true;
                Axios.post(ipServer + "pageHome/SelectActiveRegisterUserCount", param)
                        .then(res => {
                            if (res.data.code == 0) {
                                sessionUtils.setSession("token", res.data.token);
                                console.log("活跃" + JSON.stringify(res.data.data.registerUser));
                                for (var i = 0; i < res.data.data.dayActiveUser.length; i++) {
                                    res.data.data.dayActiveUser[i].日期 = sessionUtils.timestampToTime2(res.data.data.dayActiveUser[i].createTime);
                                    res.data.data.dayActiveUser[i].总用户数量 = res.data.data.dayActiveUser[i].sum;
                                    res.data.data.dayActiveUser[i].司机 = res.data.data.dayActiveUser[i].driver;
                                    res.data.data.dayActiveUser[i].商家 = res.data.data.dayActiveUser[i].businessSum;
                                }
                                this.chartData2.rows = res.data.data.dayActiveUser;
                                this.loading = false;
                            } else if (res.data.code == 3) {
                                sessionUtils.clear();
                                this.$router.push("/login");
                                this.$Message.info(res.data.msg);
                            } else {
                                this.$Message.info(res.data.msg);
                            }
                            this.loading = false;
                        })
                        .catch(err=> {
                            this.loading = false;
                            this.$Message.info(err);
                        });
            },
            search1(){
                var param = new URLSearchParams();
                param.append('mobile', sessionUtils.getSession("mobile"));
                param.append('token', sessionUtils.getSession("token"));

                if (this.startTime1) {
                    param.append('startYearMonthDay', sessionUtils.DateToTime(this.startTime1) + "");
                }
                if (this.endTime1) {
                    param.append('endYearMonthDay', sessionUtils.DateToTime(this.endTime1) + "");
                }

                this.loading = true;
                Axios.post(ipServer + "pageHome/SelectActiveRegisterUserCount", param)
                        .then(res => {
                            if (res.data.code == 0) {
                                sessionUtils.setSession("token", res.data.token);

                                console.log("注册" + JSON.stringify(res.data.data.registerUser));
                                for (var i = 0; i < res.data.data.registerUser.length; i++) {
                                    res.data.data.registerUser[i].日期 = res.data.data.registerUser[i].registeTime;
                                    res.data.data.registerUser[i].总用户数量 = res.data.data.registerUser[i].sum;
                                    res.data.data.registerUser[i].司机 = res.data.data.registerUser[i].driverCount;
                                    res.data.data.registerUser[i].商家 = res.data.data.registerUser[i].businessSum;
                                }
                                this.chartData1a1a1a1.rows = res.data.data.registerUser;
                                this.loading = false;
                            } else if (res.data.code == 3) {
                                sessionUtils.clear();
                                this.$router.push("/login");
                                this.$Message.info(res.data.msg);
                            } else {
                                this.$Message.info(res.data.msg);
                            }
                            this.loading = false;
                        })
                        .catch(err=> {
                            this.loading = false;
                            this.$Message.info(err);
                        });
            },
            getData(){
                var param = new URLSearchParams();
                param.append('mobile', sessionUtils.getSession("mobile"));
                param.append('token', sessionUtils.getSession("token"));

                this.loading = true;
                Axios.post(ipServer + "pageHome/SelectActiveRegisterUserCount", param)
                        .then(res => {
                            if (res.data.code == 0) {
                                sessionUtils.setSession("token", res.data.token);
                                for (var i = 0; i < res.data.data.dayActiveUser.length; i++) {
                                    res.data.data.dayActiveUser[i].日期 = sessionUtils.timestampToTime2(res.data.data.dayActiveUser[i].createTime);
                                    res.data.data.dayActiveUser[i].总用户数量 = res.data.data.dayActiveUser[i].dayUserTotal;
                                    res.data.data.dayActiveUser[i].司机 = res.data.data.dayActiveUser[i].driver;
                                    res.data.data.dayActiveUser[i].商家 = res.data.data.dayActiveUser[i].businessSum;
                                }

                                for (var i = 0; i < res.data.data.registerUser.length; i++) {
                                    res.data.data.registerUser[i].日期 = res.data.data.registerUser[i].registeTime;
                                    res.data.data.registerUser[i].总用户数量 = res.data.data.registerUser[i].sum;
                                    res.data.data.registerUser[i].司机 = res.data.data.registerUser[i].driverCount;
                                    res.data.data.registerUser[i].商家 = res.data.data.registerUser[i].businessSum;
                                }
                                this.chartData2.rows = res.data.data.dayActiveUser;
                                this.chartData1a1a1a1.rows = res.data.data.registerUser;
                                this.loading = false;
                            } else if (res.data.code == 3) {
                                sessionUtils.clear();
                                this.$router.push("/login");
                                this.$Message.info(res.data.msg);
                            } else {
                                this.$Message.info(res.data.msg);
                            }
                            this.loading = false;
                        })
                        .catch(err=> {
                            this.loading = false;
                            this.$Message.info(err);
                        });
            }, getDataHead(){
                var param = new URLSearchParams();
                param.append('mobile', sessionUtils.getSession("mobile"));
                param.append('token', sessionUtils.getSession("token"));
                this.loading = true;
                Axios.post(ipServer + "pageHome/selectListDataCount", param)
                        .then(res => {
                            if (res.data.code == 0) {

                                sessionUtils.setSession("token", res.data.token);
                                this.registerUserCount = res.data.data.registerUserCount;
                                this.activeUserCount = res.data.data.activeUserCount;
                                this.blogCount = res.data.data.blogCount;
                                this.driverCallCount = res.data.data.driverCallCount;
                                this.toShopsCount = res.data.data.toShopsCount;
                                this.hb = (res.data.data.activeUserCount - res.data.data.beforeActiveUserCount) / res.data.data.beforeActiveUserCount;
                                if (this.hb < 0) {
                                    this.backgroundImage = this.backgroundImage1;
                                    this.color = "#ff0000";
                                } else {
                                    this.backgroundImage = this.backgroundImage2;
                                    this.color = "#7cfb44";
                                }
                                this.hb1 = (Math.floor(this.hb * 10000) / 100) + "%";
                                this.loading = false;
                            } else if (res.data.code == 3) {
                                sessionUtils.clear();
                                this.$router.push("/login");
                                this.$Message.info(res.data.msg);
                            } else {
                                this.$Message.info(res.data.msg);
                            }
                            this.getData();
                        })
                        .catch(err=> {
                            this.loading = false;
                            this.$Message.info(err);
                        });
            }

        }
    }
</script>

<style scoped>
    @import "../../assets/css/hhh.css";
</style>